$bg-light: #f4f4f4

@mixin transition-all()
  transition: all .3s ease-out

.rg-group
  width: 400px
  overflow: hidden
  display: flex
  flex-direction: column
  .rg-header
    display: flex
    justify-content: space-between
    align-items: center
    padding: 7px 10px
    margin: 0
    background-color: $bg-light
    .rg-header-text
      flex: 1
      white-space: nowrap
      text-overflow: ellipsis
      -o-text-overflow: ellipsis
      overflow: hidden
      font-size: 14px
      // max-width: 310px
      display: inline-block
      color: #666
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
    .rg-header-control
      display: inline-flex
      button
        padding: 0
        cursor: pointer
        border: 0
        background-color: transparent
        outline: none
        line-height: 1
        color: #999
        font-size: 1rem
        @include transition-all()
        &:hover
          color: black
        &.rg-close-button
          right: 10px
          font-size: 26px
          top: 0
          font-weight: 300

  .rg-level-tabs
    padding: 0 10px
    background-color: $bg-light
    ul
      padding: 0
      margin: 0
      line-height: 1.5
      display: flex
      li
        display: inline-flex
        &.active a
          color: #333
          background-color: #fff
          border-top-left-radius: .5rem
          border-top-right-radius: .5rem
          box-shadow: 0 3px 12px rgba(0, 0, 0, .2)
        a
          display: block
          padding: 0.5rem 1rem 0.3rem
          font-size: 14px
          color: #bbb
          font-weight: 600
          text-decoration: none
          cursor: pointer
          line-height: 1.43
          font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial
          @include transition-all()

  .rg-results-container
    background-color: white
    list-style: none
    margin: 0
    padding: 0
    width: 100%
    overflow-y: auto
    overflow-x: hidden
    // box-shadow: 0 0 8px rgba(0, 0, 0, .1)
    ul.rg-results
      background-color: white
      list-style: none
      margin: 0
      // margin-top: 5px
      padding: 10px
      /*height: 300px*/
      width: 400px
      line-height: 1.5
      display: flex
      flex-wrap: wrap
      gap: 5px
      li
        // height: auto
        // line-height: 1
        margin: 0
        overflow: hidden
        padding: 3px 10px
        // position: relative
        text-align: left
        white-space: nowrap
        user-select: none
        font-size: 14px
        color: black
        cursor: pointer
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
        &.rg-item
          display: inline-flex
          /*border: 1px solid white*/
          border-radius: 8px
          color: #777
          &:hover
            /*border: 1px solid #DDDDDD*/
            /*box-shadow: 0 1px 8px rgba(0,0,0,0.2)*/
            /*-moz-box-shadow: 0 1px 8px rgba(0,0,0,0.2)*/
            /*-webkit-box-shadow: 0 1px 8px rgba(0,0,0,0.2)*/
            color: black
            background-color: #F5F5F5
          &.active
            background-color: #e3e3e3
            color: black
        &.rg-message-box
          text-align: center
          font-size: 14px
          cursor: default
          color: #aaa
